<template>
  <div class="site-aside-container">
    <Avatar :url="AvatarImg" :size="150"></Avatar>
    <h1 class="title">清风的小窝</h1>
    <Menu class="menu"></Menu>
    <Contact></Contact>
    <p class="copyright">
      备案号： xxxxxxxxx
    </p>
  </div>
</template>

<script>
import Avatar from "@/components/Avatar";
import AvatarImg from "@/assets/avatar.jpg";
import Menu from "./Menu";
import Contact from "./Contact";
export default {
  name: "SiteAside",
  components: {
    Menu, Contact, Avatar
  },
  data() {
    return {
      AvatarImg
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.site-aside-container{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 0;
  background-color: @dark;
  .menu{
    margin-bottom: 100px;
  }
  .avatar-container{
    margin: 0 auto;
  }
  .title{
    color: #ffffff;
    text-align: center;
    font-size: 1.2em;
    margin-top: 20px;
  }
  .copyright{
    text-align: center;
    font-size: 12px;
  }
}
</style>
